<template>
  <div>
    <el-container class="add-contianer">
      <el-button
        @click="hadleAddUser"
        icon="el-icon-circle-plus-outline"
        v-if="isPermissionsBtn('user_add')"
        type="primary"
      >新增</el-button>
    </el-container>
    <div class="table-body">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" :index="indexMethod" width="150" label="序号"></el-table-column>
        <el-table-column prop="createTime" width="200" label="创建日期"></el-table-column>
        <el-table-column prop="consumername" width="200" label="姓名"></el-table-column>
        <el-table-column prop="duties" width="200" label="职务"></el-table-column>
        <el-table-column prop="rolename" width="200" label="用户角色"></el-table-column>
        <el-table-column prop="username" width="200" label="登录账号"></el-table-column>
        <el-table-column prop="description" width="200" label="备注"></el-table-column>
        <el-table-column prop="status" width="200" label="状态"></el-table-column>

        <!-- <el-table-column prop="remark" label="备注"></el-table-column> -->
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              @click="handleClickEdit(scope.row)"
              type="primary"
              v-if="isPermissionsBtn('user_update')"
              size="small"
            >编辑</el-button>
            <el-popconfirm title="确定删除此代理？" @onConfirm="handleClickDelete(scope.row)">
              <el-button
                style="margin-left:15px"
                size="small"
                type="danger"
                v-if="isPermissionsBtn('user_del')"
                slot="reference"
              >删除</el-button>
            </el-popconfirm>
            <el-button
              @click="handleClickPassword(scope.row)"
              type="success"
              size="small"
              style="margin-left:15px"
              v-if="isPermissionsBtn('user_password')"
            >重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="currentPageChange"
          layout="prev, pager, next"
          :total="totalCount"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import AddUser from "./AddUser";
import UpdateUser from "./UpdateUser";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      isVisible: false,
      isVisible1: false,
      tableData: [],
      propdata: {},
      totalCount: 0,
      param: {
        pageNum: 1,
        pageSize: 10
      },
      allrolelist: {}
      //loading: true
    };
  },
  computed: {
    ...mapGetters(["isPermissionsBtn"])
  },
  components: {
    "add-user": AddUser,
    UpdateUser
  },
  mounted() {
    this.$service.getRoleList().then(res => {
      for (let i = 0; i < res.data.length; i++) {
        const element = res.data[i];
        this.allrolelist[element.roleId] = element.roleName;
      }
      this.initData();
    });
  },
  methods: {
    handleClickPassword(scope) {
      
       var usernames= scope.username
      this.$service.passwordReset(usernames).then(res => {
        if (res.code == "200") {
          this.$message({
            message: "重置成功",
            type: "success"
          });
          var currentJsonUser = localStorage.getItem("currentUser");
          var currentUser = JSON.parse(currentJsonUser);
          var userName = currentUser && currentUser.username;
          if (userName == scope.username) {
            localStorage.setItem("currentUser", null);
            localStorage.setItem("isLogin", null);
            this.$router.replace("/");
          } else {
            this.initData();
          }
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    initData() {
      this.$service.getUserList(this.param).then(res => {
        //this.loading = false;
        //console.log(res);
        if (res.code == "401") {
          this.$message({
            message: "请重新登录"
          });
          return;
        }
        for (let i = 0; i < res.data.rows.length; i++) {
          const element = res.data.rows[i];
          element.status = element.status == "0" ? "已禁用" : "已启用";
          if (element.roleId != null) {
            element.roleId = element.roleId.split(",");
            element.rolename = "";

            for (let j = 0; j < element.roleId.length; j++) {
              const item = element.roleId[j];
              element.rolename += this.allrolelist[item] + " ";
            }
          }
        }
        this.tableData = res.data.rows;
        this.totalCount = res.data.total;
      });
    },
    hadleAddUser() {
      //   this.isVisible = true;
      this.$router.push({
        path: "/addUser"
      });
    },
    currentPageChange(e) {
      this.param.pageNum = e;
      this.initData();
    },
    handleClickDelete(scope) {
      this.$service.userDelete(scope.id).then(res => {
        var currentJsonUser = localStorage.getItem("currentUser");
        var currentUser = JSON.parse(currentJsonUser);

        var userName = currentUser && currentUser.username;
        if (res.code == "200") {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          if (userName == scope.username) {
            localStorage.setItem("currentUser", null);
            localStorage.setItem("isLogin", null);
            this.$router.replace("/");
          } else {
            this.initData();
          }
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    handleClickEdit(scope) {
      console.log(scope);
      this.$router.push({
        path: "/updateuser",
        query: { name: scope.username }
      });
      //   this.isVisible1 = true;
      //   this.propdata = JSON.parse(JSON.stringify(scope));
      //   console.log(scope);
    },

    indexMethod(index) {
      var index1 = index + 1;
      return index1++;
    }
  }
};
</script>

<style>
</style>